<template>
  <div class="relative">
    <div class="flex justify-between items-center">
      <div class="flex items-center">
        <div>
          <el-image :src="props.tableRow.imageUrl" style="width: 80px; height: 80px; border-radius: 5px"> </el-image>
        </div>
        <div class="px-20px">
          <div class="text-ct1 text-20px font-500">{{ props.tableRow.productName }}</div>
          <div class="font-400 text-14px text-ct3 pt-5px">
            <span>提交时间:</span>
            <span>{{ dayjs().format("YYYY-MM-DD HH:mm:ss") }}</span>
          </div>
        </div>
      </div>
      <div class="mr-80px">
        <el-image :src="productStatus1" class="w-[80px] h-[80px]" v-if="props.tableRow.productStatus == '1'"></el-image>
        <el-image :src="productStatus2" class="w-[80px] h-[80px]" v-if="props.tableRow.productStatus == '2'"></el-image>
        <el-image :src="productStatus3" class="w-[80px] h-[80px]" v-if="props.tableRow.productStatus == '3'"></el-image>
        <el-image :src="productStatus4" class="w-[80px] h-[80px]" v-if="props.tableRow.productStatus == '4'"></el-image>
      </div>
    </div>
    <div class="drawer-header-close absolute right-0 top-0 mr-4 cursor-pointer z-10" @click="handleClose">
      <base-icon name="iconfont-general gen-guanbi" :size="14" color="var(--ct2)" />
    </div>
  </div>
</template>
<script setup>
  import dayjs from "dayjs";
  import productStatus1 from "@/assets/product/productStatus-1.png";
  import productStatus2 from "@/assets/product/productStatus-2.png";
  import productStatus3 from "@/assets/product/productStatus-3.png";
  import productStatus4 from "@/assets/product/productStatus-4.png";
  const props = defineProps({
    tableRow: {
      type: Object,
      default: () => ({ imageUrl: "" }),
    },
  });
  const emit = defineEmits(["close"]);
  const handleClose = () => {
    emit("close");
  };
</script>
<style>
  .drawer-header-close {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 50%;
    background-color: var(--bg);
    transition: all 0.3s;

    .iconfont-general {
      font-size: 14px;
      font-weight: 500;
      color: var(--ct3);

      &:hover {
        color: var(--bd) !important;
      }
    }
  }
</style>
